<template>
  <div class="role-management">
    <!-- 搜索区域 -->
    <el-form :inline="true" class="form-area">
      <el-form-item label="角色名称">
        <el-input placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select placeholder="请选择状态">
          <el-option label="启用" value="enable" />
          <el-option label="停用" value="disable" />
        </el-select>
      </el-form-item>
      <el-button type="primary">搜索</el-button>
    </el-form>

    <!-- 功能按钮 -->
    <div class="btn-area">
      <el-button type="primary" @click="openDialog">添加</el-button>
      <el-button type="danger">删除</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="UserData" border style="width: 100%;margin-bottom: 30px;">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="depart_Name" label="所在部门" />
      <el-table-column prop="userName" label="用户名称" />
      <el-table-column prop="role_Name" label="用户角色" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination layout="total, sizes, prev, pager, next" />
  </div>

  <!-- 添加用户对话框 -->
  <el-dialog v-model="dialogVisible" title="用户添加" width="500" @closed="resetForm">
    <el-form :model="userform" :rules="formRules" ref="formRef">
      <el-form-item label="用户名称" :label-width="formLabelWidth" prop="userName">
        <el-input v-model="userform.userName" placeholder="请输入用户名称" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
        <el-input v-model="userform.password" placeholder="请输入密码" show-password />
      </el-form-item>
      <el-form-item label="部门" :label-width="formLabelWidth" prop="departmentId">
        <el-select v-model="userform.departmentId" placeholder="请选择部门">
          <el-option v-for="item in DepData" :key="item.departmentId" :label="item.depart_Name"
            :value="item.departmentId" />
        </el-select>
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth" prop="role_Id">
        <el-select v-model="userform.role_Id" placeholder="请选择角色">
          <el-option v-for="item in RoleData" :key="item.roleId" :label="item.role_Name" :value="item.role_Id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">添加</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { GetUser, GetDepartment, GetRole, AddUser } from '@/api/Index'
import { ElMessage, type FormInstance } from 'element-plus'

const formLabelWidth = '140px'

// 对话框状态
const dialogVisible = ref(false)

// 表单数据
const userform = reactive({
  departmentId: '',
  userName: '',
  password: '',
  role_Id: ''
})

// 表单验证规则
const formRules = reactive({
  userName: [
    { required: true, message: '用户名称不能为空', trigger: 'blur' },
    { min: 2, max: 16, message: '长度在2到16个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ],
  departmentId: [
    { required: true, message: '请选择部门', trigger: 'change' }
  ],
  role_Id: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
})

// 表单引用
const formRef = ref<FormInstance>()

// 打开对话框
const openDialog = () => {
  dialogVisible.value = true
  resetForm()
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    // 验证表单
    await formRef.value?.validate()

    // 调用API添加用户
    const res = await AddUser(userform)
    if (res.code === 200) {
      ElMessage.success('添加成功')
      dialogVisible.value = false
      UserShow() // 刷新用户列表
    } else {
      ElMessage.error('添加失败')
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 部门数据
const DepData = ref()
const Depshow = async () => {
  const res = await GetDepartment()
  DepData.value = res.data
}

// 角色数据
const RoleData = ref()
const RoleShow = async () => {
  const res = await GetRole()
  RoleData.value = res.data
}

// 用户数据
const UserData = ref([])
const UserShow = async () => {
  const res = await GetUser()
  UserData.value = res.data
}

// 初始化加载数据
onMounted(() => {
  UserShow()
  Depshow()
  RoleShow()
})
</script>

<style scoped>
.role-management {
  padding: 20px;
}

.form-area {
  display: flex;
  margin-bottom: 20px;
}

.btn-area {
  margin: 20px 0;
}
</style>